<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-row style="margin-bottom: 30px" :gutter="24">
        <el-col :span="4">
          <div class="select">
            <span class="tips">店铺</span>
            <el-select v-model="params.shopId" class="m-2" placeholder="请选择店铺" size="small" @change="getTableList">
              <el-option
                  v-for="item in shopOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="select">
            <span class="tips">出账月份</span>
            <el-date-picker v-model="params.monthDate" format="YYYY-MM" value-format="YYYY-MM"
                            type="month" placeholder="请选择月份" size="small" @change="getTableList"/>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="select">
            <span class="tips">出账状态</span>
            <el-select v-model="params.state" class="m-2" placeholder="请选择出账状态" size="small" @change="getTableList">
              <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button size="small" @click="onReset" icon="ele-Refresh">重置</el-button>
        </el-col>
      </el-row>

      <el-row style="margin-bottom: 5px">
        <el-col :span="12">
          <el-button size="small" type="primary" @click="openCreate" icon="ele-Plus">发起收款单</el-button>
          <el-button size="small" type="danger" @click="batchRemove" icon="ele-Delete" v-if="false">删除</el-button>
        </el-col>
        <el-col :span="12" style="justify-content:flex-end;display:flex;">
          <el-button size="small" type="warning" @click="exportVisible = true" icon="ele-Download">导出</el-button>
        </el-col>
      </el-row>

      <div class="table-box">
        <el-table :data="tableList" border size="small" class="tableList"  @selection-change="handleSelectionChange" :default-sort="{ prop: 'profit' }">
          <el-table-column type="selection" width="30" fixed="left"/>
          <el-table-column align="center" prop="name" label="店铺名称" />
  <!--        这要区分年份和月份我是不太懂的-->
          <el-table-column align="center" prop="month" label="年份" />
          <el-table-column align="center" prop="year" label="月份" />
          <el-table-column align="center" prop="salesAmountByMonth" label="月营销额" />
          <el-table-column align="center" prop="profit" label="店铺利润" sortable />
          <el-table-column align="center" prop="paymentOrderId" label="打款单号"  />
          <el-table-column align="center" prop="paymentExplain" label="打款说明"  />
          <el-table-column align="center" prop="paymentImage" label="打款图片"  >
            <template v-slot="scope">
              <el-image class="paymentImage" :src="scope.row.paymentImage" :preview-src-list="[scope.row.paymentImage]" :preview-teleported="true" alt/>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="paymentRemark" label="打款备注"  />
          <el-table-column align="center" prop="state" label="出账状态"  >
            <template v-slot="scope">
              <el-tag v-if="scope.row.state === '0'" type="success">已出账</el-tag>
              <el-tag v-else type="error">未出账</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" >
            <template v-slot="scope">
              <el-button size="small" type="primary" link @click="viewDetail(scope.row)">查看详情</el-button>
              <el-button size="small" type="primary" link @click="receiptConfirm(scope.row)">确认收款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="params.current"
              v-model:page-size="params.size"
              :page-sizes="[5, 10, 15, 20]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="currentChange"
          />
        </div>
      </div>
    </el-card>

    <!--    导出Excel表格-->
    <el-dialog v-model="exportVisible" title="导出Excel表格" destroy-on-close width="40%">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="isExportAll" class="ml-4" justify="space-around">
          <el-radio label="0" size="large">当前页面</el-radio>
          <el-radio label="1" size="large">所有数据</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="exportVisible = false">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="batchExport">导出</el-button>
          </span>
      </template>
    </el-dialog>


    <!-- 发起收款单 -->
    <el-dialog v-model="outAccountVisible" title="发起收款单" destroy-on-close width="520px">
      <div class="mb-2 flex items-center text-sm">
        <el-form :model="outAccountForm" :rules="outAccountRules" size="small" ref="outAccountFormRef" label-width="110px" class="drawer-form">
          <el-form-item prop="state" label="打款图片：">
            <el-upload ref="uploadBanner" action="#" :headers="headers" :on-change="changeTransferImg" class="avatar-uploader"
                       :auto-upload="false" style="margin-bottom: 10px;" :show-file-list="false">
              <img v-if="imageUrl" class="el-upload-list__item-thumbnail avatar" :src="imageUrl" />
              <el-icon v-else class="avatar-uploader-icon"><ele-Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item prop="state" label="打款单号：">
            <el-input v-model="outAccountForm.paymentOrderId" placeholder="打款单号" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="state" label="打款说明：">
            <el-input v-model="outAccountForm.paymentExplain" placeholder="打款说明" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="state" label="打款备注：">
            <el-input v-model="outAccountForm.paymentRemark" type="textarea" placeholder="打款备注" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="customId" label="店铺名称：">
            <el-input v-model="outAccountForm.name" placeholder="店铺名称" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="receivableAccount" label="日期：">
            <el-date-picker v-model="outAccountForm.createTime" format="YYYY-MM" value-format="YYYY-MM" type="month" placeholder="请选择日期" size="small"/>
          </el-form-item>
          <el-form-item prop="notReceived" label="月营销额：">
            <el-input v-model="outAccountForm.salesAmountByMonth" type="number" placeholder="月营销额" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="state" label="店铺利润：">
            <el-input v-model="outAccountForm.profit" type="number" placeholder="店铺利润" style="width: 300px;"/>
          </el-form-item>
          <el-form-item prop="state" label="出账状态：">
            <el-select v-model="outAccountForm.state" class="m-2" placeholder="请选择出账状态" size="small" @change="getTableList">
              <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="null" label="无原型图">

          </el-form-item>
        </el-form>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="outAccountVisible = false">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="outAccountSubmit(outAccountFormRef)">提交</el-button>
          </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {reactive, toRefs, ref} from 'vue'
import {Session} from "../../../utils/storage";
import { Plus } from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'

export default {
  name: "index",
  setup() {
    const outAccountFormRef = ref()
    const state = reactive({
      outAccountVisible:false,
      outAccountForm:{
        name:'',
        createTime:'',
        salesAmountByMonth:'',
        profit:'',
        paymentOrderId:'',
        paymentExplain:'',
        paymentImage:'',
        paymentRemark:'',
        state:''
      },
      outAccountRules:{},
      exportVisible:false,
      isExportAll: '0',
      params: {
        current: 1,
        size: 10,
        monthDate:'',
        shopId:'',
        state:''
      },
      total: 0,
      tableList:[
        {
          name:'1',
          month:'1',
          year:'1',
          salesAmountByMonth:'1',
          profit:'1',
          paymentOrderId:'1',
          paymentExplain:'1',
          paymentImage:'https://czy-common-oss.oss-cn-guangzhou.aliyuncs.com/image/10002.jpg',
          paymentRemark:'1',
          state:'0'
        },
        {
          name:'2',
          month:'2',
          year:'2',
          salesAmountByMonth:'2',
          profit:'2',
          paymentOrderId:'2',
          paymentExplain:'2',
          paymentImage:'https://czy-common-oss.oss-cn-guangzhou.aliyuncs.com/image/1667297390367.jpg',
          paymentRemark:'2',
          state:'1'
        },
      ],
      shopOption:[
        {
          label:'三只老鼠零食铺',
          value:'0',
        },
        {
          label:'长春农博园',
          value:'1',
        }
      ],
      stateOption:[
        {
          label:'未出账',
          value:'0',
        },
        {
          label:'已出账',
          value:'1',
        }
      ],
      headers:{'17work': Session.get('token')},
      transferImg:'', //转账图片
      imageUrl:null,
    })
    //获取数据
    const getTableList = async () =>{

    }
    //打开新增已收发票
    const openCreate = () =>{
      state.outAccountVisible = true
    }
    //查看详情
    const viewDetail = () =>{

    }
    //确认收款
    const receiptConfirm = () =>{

    }
    //重置
    const onReset = () =>{
      state.params = {
        current: 1,
        size: 5,
        monthDate:'',
        shopId:'',
        state:''
      }
      getTableList()
    }
    //导出
    const batchExport = () =>{

    }
    //供应商图片数据
    const changeTransferImg = (file) => {
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png' && file.raw.type !== 'image/bmp' && file.raw.type !== 'image/jpg') {
        ElMessage.error('上传文件必须为图片格式')
        return false
      } else if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('图片文件不可以大于 10MB!')
        return false
      }
      state.imageUrl = URL.createObjectURL(file.raw)
      state.transferImg = file.raw
    }
    //批量选择
    const handleSelectionChange = () =>{

    }
    //批量删除
    const batchRemove = () =>{

    }
    //提交
    const outAccountSubmit = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (!valid) return // 必填没有填就直接结束
      })
    }
    const currentChange = (current) => {
      state.params.current = current
      getTableList()
    }
    const sizeChange = (size) => {
      state.params.size = size
      currentChange(1)
    }

    return{
      ...toRefs(state),
      Plus,
      ElMessage,
      outAccountFormRef,
      getTableList,
      openCreate,
      viewDetail,
      receiptConfirm,
      currentChange,
      sizeChange,
      onReset,
      batchExport,
      handleSelectionChange,
      batchRemove,
      outAccountSubmit,
      changeTransferImg,

    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    .paymentImage{
      width: 100px;
    }

  }

  .select .tips{
    margin-right: 10px;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
  }


  .avatar-uploader {
    :deep(.el-upload){
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    :deep(.el-upload:hover){
      border-color: var(--el-color-primary);
    }
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 140px;
    text-align: center;
  }

  .avatar-uploader .avatar {
    width: 200px;
    height: 140px;
    display: block;
  }
}
</style>
